<template>
  <view class="exam-page">
    <!-- 头部信息 -->
    <view class="header">
  
      <view class="timer">00:20:56</view>
    </view>
    <!-- 试卷基本信息 -->
    <view class="paper-info">
      <text class="paper-name">测试</text>
      <text class="paper-detail">试卷总分：5 考试时间：21分钟</text>
    </view>
    <!-- 题目列表 -->
    <view class="question-list">
      <view class="question" v-for="(item, index) in questions" :key="index">
        <view class="question-title">
          <text>{{index + 1}} {{item.title}} （{{item.score}}分）</text>
        </view>
        <view class="answer-area" v-if="item.type === 'textarea'">
          <textarea 
            class="textarea" 
            placeholder="请输入答案" 
            v-model="item.answer"
          ></textarea>
        </view>
        <view class="answer-area" v-else-if="item.type === 'radio'">
          <label 
            class="radio-label" 
            v-for="(option, optIndex) in item.options" 
            :key="optIndex"
          >
            <radio 
              :value="option" 
              v-model="item.answer"
            ></radio>
            <text>{{option}}</text>
          </label>
        </view>
      </view>
    </view>
    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitPaper">提交试卷</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          title: '中华四大名著都有哪些，下列正确的是',
          score: 2.5,
          type: 'textarea',
          answer: ''
        },
        {
          title: '中华四大名著都有哪些，下列正确的是',
          score: 2.5,
          type: 'radio',
          options: ['A.红楼梦', 'B.白楼梦', 'C.青楼梦', 'D.绿楼梦'],
          answer: ''
        }
      ]
    };
  },
  methods: {
    submitPaper() {
      // 提交试卷逻辑，如请求接口上传答案等
      console.log('提交的答案：', this.questions);
      // 可结合 uni.request 发送数据到后端
    }
  }
};
</script>

<style scoped>
.exam-page {
  padding: 15rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
}
.timer {
  font-size: 28rpx;
  color: #fff;
  background-color: #0099ff;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
}
.paper-info {
  margin-top: 20rpx;
}
.paper-name {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.paper-detail {
  font-size: 24rpx;
  color: #666;
}
.question-list {
  margin-top: 20rpx;
}
.question {
  margin-bottom: 30rpx;
}
.question-title {
  font-size: 26rpx;
  margin-bottom: 15rpx;
}
.textarea {
  width: 100%;
  min-height: 120rpx;
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 10rpx;
  font-size: 24rpx;
}
.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 24rpx;
}
.submit-btn {
  background-color: #0099ff;
  color: #fff;
  font-size: 28rpx;
}
</style>